<template>
  <div class="rating" ref="rating">
    <div class="scrollContent">
      评价也
      <div class="selectTypeWrap">
        <select-type @showOneEvent='showOne' :showOneType='showOneType' :typeNum='typeNum' :typeDesc='typeDesc'
                     :switchFlag='switchFlag'></select-type>
      </div>
      <ul>
        <li v-for="rate in ratingArr" v-show="showOne" >
          <p>
            <span>{{rate.rateTime}}</span>
            <span>{{rate.username}}</span>
          </p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  const RES_OK = 200;
  const ALL = 2;
  const POSITIVE = 0;
  const NEGATIVE = 1;
  import selectType from  'common/selectType/selectType';
  import BScroll from  'better-scroll';
  export default {
    data(){
      return {
        ratingArr: [],
        showOneType:ALL,
        typeNum: {
          all: 23,
          positive: 12,
          negative: 22
        },
        typeDesc: {
          "all": "全部",
          "positive": "满意",
          "negative": "不满意",
        },
        switchFlag: false
      }
    },
    created(){
      this.getRatingsArr();
    },
    methods: {
      getRatingsArr (){
        this.axios.get('/static/data.json', {
          params: {}
        })
          .then((res) => {
            if (res.code === RES_OK) {
            }
            console.log(res.data);
            this.ratingArr = res.data.ratings;
            this.typeNum.all = this.ratingArr.length;
            let positiveNum = 0;
            this.ratingArr.forEach((item) => {
              if (item.rateType == 0) {
                positiveNum++;
              }
            });
            this.typeNum.positive = positiveNum;
            this.typeNum.negative = this.typeNum.all - positiveNum;

            setTimeout(() => {
              this.initScroll();
            }, 20)
          })
          .catch((error) => {
            console.log(error);
          });
      },
      initScroll (){
        this.navScroll = new BScroll(this.$refs.rating, {
          click: true
        });
      },
      showOne(type){
        this.showOneType = type;
      }
    },
    computed: {

    },
    components: {
      selectType
    }
  }
</script>

<style lang="scss">
  .rating {
    position: absolute;
    width: 100%;
    top: 172px;
    bottom: 50px;
    overflow: hidden;
    .scrollContent {

    }
  }

</style>
